<template>
  <div>
    首页
    <span>{{ $t("message.Hello") }}</span>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary" @click="showData">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <!-- <el-button type="danger" @click="closeWs">Danger</el-button> -->
    </el-row>
    <el-upload
      style="width: 500px"
      ref="uploadRef"
      v-model:file-list="fileList"
      action="/file/api/upload"
      multiple
      :data="data"
      :on-success="handleSuccess"
      :on-error="handleError"
      :auto-upload="false"
      :limit="9"
    >
      <template #trigger>
        <el-button type="primary">select file</el-button>
      </template>
      <el-button type="primary" @click="uploadFiles">手动上传</el-button>
    </el-upload>

    <!-- <details open>
      <summary class="custom-triangle">点我展开</summary>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat
      necessitatibus in ipsam, consectetur commodi possimus fugit dicta
      accusamus dolorem excepturi officia repellendus maxime ea atque animi
      quisquam vitae fugiat. Ab.
    </details> -->

    <!-- <RecycleScroller
  class="scroller" ref="scrollerRef"
  :items="allOptions"
  :item-size="40"
  page-mode
  :buffer="274"
  :prerender="20"
>
  <template #default="{ item }">
    <div>{{ item.name }}</div>
  </template>
</RecycleScroller> -->

    <el-select
      style="width: 240px"
      v-model="selectedValue"
      :persistent="true"
      filterable
      clearable
      remote
      :remote-method="loadOptions"
      :loading="loading"
      remote-show-suffix
      placeholder="请选择"
      @change="change"
    >
      <RecycleScroller
        :items="filterList"
        :item-size="40"
        page-mode
        key-field="id"
        :buffer="274"
        :prerender="20"
      >
        <template #default="{ item }">
          <el-option :value="item.id" :label="item.name">{{
            item.name
          }}</el-option>
        </template>
      </RecycleScroller>
    </el-select>

    <div style="font-size: 30px">
      <font-awesome-icon icon="fish" style="--fa-animation-duration: 0.5s;"/>
      <font-awesome-icon icon="frog" size="sm" bounce />
      <font-awesome-icon icon="dog" size="3x" />
      <font-awesome-icon icon="cat" size="2x" flip="horizontal" />
      <font-awesome-icon icon="fa-solid fa-coffee" inverse />
      <!-- <font-awesome-layers full-width class="fa-4x">
        <font-awesome-icon icon="fa-solid fa-envelope" />
        <font-awesome-layers-text counter value="1" position="top-right" />
      </font-awesome-layers> -->
      <font-awesome-icon
        icon="fa-solid fa-coffee"
        transform="shrink-7"
        mask="fa-solid fa-circle"
      />
      <font-awesome-icon
        icon="fa-solid fa-coffee"
        transform="shrink-6 left-4"
      />
      <font-awesome-icon icon="fa-solid fa-coffee" pull="left" />
      <font-awesome-icon icon="fa-solid fa-coffee" pull="right" />
      <font-awesome-icon icon="fa-solid fa-coffee" border />
      <font-awesome-icon icon="fa-solid fa-exclamation-triangle" fade />
      <font-awesome-icon icon="fa-solid fa-compact-disc" flip />
      <font-awesome-icon icon="fa-solid fa-bell" shake  style="--fa-animation-duration: 2s;"/>
      <font-awesome-icon icon="fa-solid fa-cog" spin />
      <font-awesome-icon icon="fa-solid fa-compass" spin spin-reverse />
      <font-awesome-icon icon="fa-solid fa-spinner" spin-pulse />
      <font-awesome-icon icon="fa-dog" size="2x" rotation="90" beat />
      <font-awesome-icon
        icon="fa-regular fa-circle-user"
        beat-fade
        style="font-size: 50px"
      />
      <font-awesome-icon icon="fa-brands fa-threads" bounce />
      <el-divider></el-divider>

      <Icon icon="token-branded:coc" /><Icon
        icon="line-md:cog-off-loop"
        style="color: #1b3ac7"
      />
      <Icon icon="line-md:cog-loop" style="color: #1b3ac7" />
      <Icon
        icon="material-symbols:apk-document-outline-rounded"
        style="color: #1b3ac7"
      />
      <div class="light-blue-block">
        <el-icon>
          <QuestionFilled />
        </el-icon>
        <Icon icon="nrk:help" :inline="true" flip="horizontal" />
        <el-icon size="18"><Bell /></el-icon>
        <Bell style="width: 1em; height: 1em" />
        <Icon icon="bi:bell-fill" :inline="true" flip="vertical" />
        人员引入图标
        <el-icon><UserFilled /></el-icon>

        <Icon icon="bi:person-fill" style="font-size: 18px" />

        <Icon icon="bi:stopwatch" :inline="true" />
      </div>
      <div class="orange-block">
        <Icon icon="bi:bell-fill" :inline="true" />
      </div>
      <div>
        <Icon icon="openmoji:android" :inline="true" color="#f00ff0" />
        <Icon class="red-icon" icon="bx:bx-home" :inline="true" />
        <Icon :style="{ color: 'red' }" icon="bx:bx-home" :inline="true" />
        <Icon color="red" icon="bx:bx-home" :inline="true" />
      </div>
      <div>
        Icon with palette: <Icon icon="noto:paintbrush" :inline="true" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Icon } from "@iconify/vue";
import type { UploadProps, UploadUserFile, UploadInstance } from "element-plus";
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
// import websocketData from "@/utils/websocket";
import { showDialog } from "./showDialog.js";
const showData = () => {
  showDialog("测试弹窗");
};
// const client = new websocketData("ws://localhost:9999");
// client.addEventListener("open", () => {
//   console.log("连接成功");
//   client.send("start");
// });
// client.addEventListener("message", (event: MessageEvent) => {
//   console.log(event);
//   console.log(event.data);
// });
// client.addEventListener("close", (e: Event) => {
//   console.log("连接关闭", e);
// });
const selectedValue = ref();
const options: Ref = ref([]);
console.log("清除了吗？首页");
// const closeWs = () => {
//   client.close();
// };
const generateData = () => {
  const data = [];
  for (let i = 0; i < 50000; i++) {
    data.push({
      id: i + 1,
      name: `选项 ${i + 1}--测试护具湿哒哒电费水电费水电费收到`,
    });
  }
  return data;
};

const allOptions = generateData();
const loading = ref(false);
const change = (v: any) => {
  console.log(v, "变了");

  if (!v) {
    loadOptions("");
  }
};
const loadOptions = (query: string) => {
  loading.value = true;
  // console.log(query);
  // const arr = allOptions.filter((item) => item.name.includes(query));
  // if (query && !arr.length) {
  //   show.value = false
  // } else {
  //   show.value = true

  // }
  setTimeout(() => {
    if (query) {
      options.value = allOptions.filter((item) => item.name.includes(query));
    } else {
      options.value = allOptions;
    }
    loading.value = false;
  }, 50);
};

// 初次加载全部数据
loadOptions("");

const filterList = computed(() => options.value);
const fileList = ref<UploadUserFile[]>([]);
// 文件状态类型定义
interface FileStatus {
  uid: string | number;
  status: "uploading" | "success" | "fail" | "ready";
}
// 用于跟踪上传状态的数组
const uploadStatus = ref<FileStatus[]>([]);
const data = {
  uid: "",
  bucket: "test",
  project: "",
};
const uploadRef = ref<UploadInstance>();
// 上传成功的处理函数
const handleSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  console.log(response);
  if (uploadFile.uid !== undefined) {
    updateFileStatus(uploadFile.uid, "success");
  }
};

// 上传失败的处理函数
const handleError: UploadProps["onError"] = (err, uploadFile) => {
  console.error("Upload error:", err);
  if (uploadFile.uid !== undefined) {
    updateFileStatus(uploadFile.uid, "fail");
  }
};
// 开始上传文件
const uploadFiles = () => {
  console.log(fileList.value, "所有文件");

  // 初始化 uploadStatus 数组，并确保 uid 存在
  uploadStatus.value = fileList.value.map((file) => {
    if (file.uid === undefined) {
      throw new Error(`File ${file.name} is missing uid`);
    }
    return {
      uid: file.uid,
      status: file.status || "ready",
    };
  });
  console.log(uploadStatus.value, "上传");

  // 调用 el-upload 组件的提交方法
  uploadRef.value?.submit();
};
// 更新文件上传状态
const updateFileStatus = (uid: string | number, status: "success" | "fail") => {
  const index = uploadStatus.value.findIndex((item) => item.uid === uid);
  if (index !== -1) {
    uploadStatus.value[index].status = status;
    checkAllFilesUploaded(); // 检查所有文件的上传状态
  }
};

// 检查是否所有文件都已上传完毕
const checkAllFilesUploaded = () => {
  const allUploaded = uploadStatus.value.every(
    (file) => file.status !== "ready"
  );
  console.log(fileList.value);
  console.log(uploadStatus.value, "文件状态");

  if (allUploaded) {
    // 在此处执行其他需要的操作
    ElMessage.success("操作完成");
    console.log(
      "--------------所有文件都已上传完成或失败----------------------"
    );
    console.log(fileList.value);
    console.log("------------------------------------");
  }
};

// import WebSocketWrapper from "@/utils/websocket";
// const client = new WebSocketWrapper("ws://localhost:3000", {
//   reconnectInterval: 1000,
//   // maxReconnectAttempts: 2,
// });
// client.addEventListener("open", (event, id) => {
//   console.log(`WebSocket连接 ${id} 已打开:`, event);
// });
// client.addEventListener("message", (e, id) => {
//   console.log(e, id);
// });
// const res = client.getStatus();
// console.log(res);

// client.close()
// let isC = 1
// ElMessageBox.prompt('proxy will permanently delete the file. Continue?', 'Warning', {
//   type: 'warning',
//   inputErrorMessage: '请输入',
//   inputPattern: /.+/,
//   beforeClose: (action, _instance, done) => {
//     // console.log(action, instance, done)
//     if (action === 'confirm') {
//       console.log(isC)
//       getData()
//       done()
//       // ElMessageBox.close()
//     } else {
//       console.log('取消')
//       done()
//     }
//   }
// })
//   .then(({ value }) => {
//     console.log(value)
//     console.log(isC)
//   })
//   .catch(() => {})
// const getData = () => {
//   setTimeout(() => {
//     console.log(3333)
//   })
// }
</script>
<style lang="scss" scoped>
details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 20px;
  list-style: none;
  position: relative;
}

details[open] > summary {
  background-color: #ccf;
  position: relative;
}
details[open] > summary::before {
  content: ">";
  position: absolute;
  top: 2px;
  left: 6px;
  transform: rotate(90deg);
}

.custom-triangle::before {
  content: ">";
  position: absolute;
  top: 2px;
  left: 6px;
  transition: 0.3s;
}
</style>
: any: string | boolean
